<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>表单FORM容器</title>
	<link href="../../theme/style.css" rel="stylesheet" type="text/css" />
	<script src="../../theme/browser.js" type="text/javascript"></script>
</head>
<body>
	<script type="text/javascript" src="js/header.js"></script>
	<h1>表单FORM容器</h1>
	<div class="intro">
		初始化表单容器与事件<br />
		元素：FORM<br />
		兼容：HTML5
	</div>
	<script type="text/javascript" src="js/itabs.js"></script>

	<h2>属性</h2>
	<div class="program">
		<table>
			<thead>
				<tr>
					<th>&#160;</th>
					<th>属性名</th>
					<th>属性值</th>
					<th>&#160;</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>form-ignore</td>
					<td>false | true</td>
					<td>是否忽略提交事件(默认: false, 即不忽略)</td>
				</tr>
				<tr>
					<td>2</td>
					<td>target</td>
					<td>ajax | string | null</td>
					<td>表单提交位置与方式</td>
				</tr>
			</tbody>
		</table>
	</div>
	
	<h2>事件</h2>
	<div class="program">
		<table>
			<thead>
				<tr>
					<th>&#160;</th>
					<th>事件</th>
					<th>参数</th>
					<th>&#160;</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>submit</td>
					<td>event e</td>
					<td>
						表单提交时，自动运行本方法；
						验证当前表单各元素是否正确；<br />
						只有表单各元素都正确时，才能正常提交
					</td>
				</tr>
			</tbody>
		</table>		
	</div>
	
	<h2>返回<em>plainObject</em></h2>
	<div class="program">
		<table>
			<thead>
				<tr>
					<th>&#160;</th>
					<th>名称</th>
					<th>类型</th>
					<th>参数</th>
				</tr>
			</thead>
			<thead>
				<tr>
					<td>1</td>
					<td>errno</td>
					<td>int</td>
					<td>错误编号<br />当表单出错了，该值为大于"0"的整数;<br />反之为"0"整数<br />例如：{errno : 1}</td>
				</tr>
				<tr>
					<td>2</td>
					<td>error</td>
					<td>string</td>
					<td>错误原因<br />例如：{error : '邮箱已被占用'}</td>
				</tr>
				<tr>
					<td>3</td>
					<td>field</td>
					<td>string</td>
					<td>错误字段<br />例如：{field : 'email'}</td>
				</tr>
				<tr>
					<td>4</td>
					<td>redirect</td>
					<td>string</td>
					<td>URL地址<br />表单正确执行完成后，重定向到URL链接下</td>
				</tr>
				<tr>
					<td>5</td>
					<td>callback</td>
					<td>string</td>
					<td>回调方法名称<br />表单提交后执行callback方法<br />例如：示例5代码</td>
				</tr>
			</thead>
		</table>
	</div>

	<h2>示例</h2>
	<div class="codeset">
	<code title="#1：忽略提交事件"><form form-ignore="true" ... >
	...
</form></code>
	<div class="br"></div>
	<code title="#2：以AJAX提交"><form target="ajax" ... >
	...
</form></code>
	<div class="br"></div>
	<code title="#3：指定提交方式"><form target="_blank" ... >
	...
</form></code>
	<div class="br"></div>
	<code title="#4：参考示例表单"><form ...>
	<input type="email" name="email" placeholder="请填写邮箱" />
	<input type="password" name="password" placeholder="请填写密码" />
	<input type="submit" value="立即登陆" />
</form></code>
	<div class="br"></div>
	<code title="#5：返回方法控制">// step1: HTML部分(表单配置)
<form ...>
	<input type="email" name="email" placeholder="请填写邮箱" />
	<input type="password" name="password" placeholder="请填写密码" />
	<input type="submit" value="立即登陆" />
</form>

// step2: 给表单绑定test-callback回调
$('form').data('test-callback', function(_form, _plain){
	/*!
	* 表单成功提交后，业务逻辑执行
	* @param object _form, 当前表单对象
	* @param object _plain, 服务器端返回的plainObject(step3的结果)
	*/
});

// step3: 服务器端返回placeObject对象, 执行回调方法
var _plain = {
	callback : 'test-callback'
}</code>
	</div>

	<h2>DEMO</h2>
	<div class="codeset">
		<form action="demo.index.php" method="post">
			<input required filter-icon="user" type="email" name="email" placeholder="请填写邮箱" />
			<div class="br"></div>
			<input required filter-icon="lock" type="password" name="password" placeholder="请填写密码" />
			<div class="br"></div>
			<input type="submit" value="立即登陆" />
		</form>
	</div>

<script type="text/javascript" src="../../theme/footer.js"></script>
</body>
</html>	